---
title: Tekst
image: /images/user-guide/notes/notes_header.png
---

<Frame>
  <img src="/images/user-guide/notes/notes_header.png" alt="Header" />
</Frame>

## Tekstinvoer

Staat gebruikers toe om tekst in te voeren en te bewerken.

<Tabs>

<Tab title="Usage">

```jsx
import { RecoilRoot } from "recoil";
import { TextInput } from "@/ui/input/components/TextInput";

export const MyComponent = () => {
  const handleChange = (text) => {
    console.log("Input changed:", text);
  };

  const handleKeyDown = (event) => {
    console.log("Key pressed:", event.key);
  };

  return (
    <RecoilRoot>
      <TextInput
        className
        label="Username"
        onChange={handleChange}
        fullWidth={false}
        disableHotkeys={false}
        error="Invalid username"
        onKeyDown={handleKeyDown}
        RightIcon={null}
      />
    </RecoilRoot>
  );
};

```

</Tab>

<Tab title="Props">

| Props            | Soort              | Beschrijving                                                                                                                                                          |
| ---------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className        | tekenreeks         | Optionele naam voor extra styling                                                                                                                                     |
| label            | tekenreeks         | Stelt het label voor de invoer voor                                                                                                                                   |
| onChange         | functie            | De functie die wordt aangeroepen wanneer de invoerwaarde verandert                                                                                                    |
| volledigeBreedte | booleaan           | Geeft aan of de invoer 100% van de breedte moet innemen                                                                                                               |
| disableHotkeys   | booleaan           | Geeft aan of sneltoetsen zijn ingeschakeld voor de invoer                                                                                                             |
| fout             | tekenreeks         | Stelt het foutbericht voor dat moet worden weergegeven. Als dit is opgegeven, wordt ook een foutpictogram aan de rechterkant van de invoer toegevoegd |
| onKeyDown        | functie            | Called when a key is pressed down while the input field is focused. Ontvangt een `React.KeyboardEvent` als argument                                   |
| RightIcon        | PictogramComponent | Een optionele pictogramcomponent die aan de rechterkant van de invoer wordt weergegeven                                                                               |

De component accepteert ook andere HTML-invoerelementeigenschappen.

</Tab>

</Tabs>

## Autosize Text Input

Tekstinvoercomponent die automatisch zijn hoogte aanpast op basis van de inhoud.

<Tabs>

<Tab title="Usage">

```jsx
import { RecoilRoot } from "recoil";
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";

export const MyComponent = () => {
  return (
    <RecoilRoot>
      <AutosizeTextInput
        onValidate={() => console.log("onValidate function fired")}
        minRows={1}
        placeholder="Write a comment"
        onFocus={() => console.log("onFocus function fired")}
        variant="icon"
        buttonTitle
        value="Task: "
      />
    </RecoilRoot>
  );
};
```

</Tab>

<Tab title="Props">

| Props        | Soort      | Beschrijving                                                                                                           |
| ------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------- |
| bijValideren | functie    | De terugroepfunctie die u wilt activeren wanneer de gebruiker de invoer valideert                                      |
| minRows      | nummer     | Het minimum aantal rijen voor het tekstgebied                                                                          |
| placeholder  | tekenreeks | De tijdelijke tekst die u wilt weergeven wanneer het tekstgebied leeg is                                               |
| bijFocus     | functie    | De terugroepfunctie die u wilt activeren wanneer het tekstgebied de focus krijgt                                       |
| variant      | tekenreeks | De variant van de invoer. Opties zijn onder andere: `standaard`, `pictogram` en `knop` |
| buttonTitle  | tekenreeks | De titel voor de knop (alleen van toepassing voor de knopvariant)                                   |
| waarde       | tekenreeks | De initiële waarde voor het tekstgebied                                                                                |

</Tab>

</Tabs>

## Tekstgebied

Staat je toe om invoer van meerdere regels te maken.

<Tabs>
<Tab title="Usage">

```jsx
import { TextArea } from "@/ui/input/components/TextArea";

export const MyComponent = () => {
  return (
    <TextArea
    disabled={false}
    minRows={4}
    onChange={()=>console.log('On change function fired')}
    placeholder="Enter text here"
    value=""
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props         | Soort      | Beschrijving                                                                 |
| ------------- | ---------- | ---------------------------------------------------------------------------- |
| uitgeschakeld | booleaan   | Geeft aan of het tekstgebied is uitgeschakeld                                |
| minRows       | nummer     | Minimaal aantal zichtbare rijen voor het tekstgebied.        |
| onChange      | functie    | Callback functie geactiveerd wanneer de inhoud van het tekstgebied verandert |
| placeholder   | tekenreeks | Tijdelijke tekst weergegeven wanneer het tekstgebied leeg is                 |
| waarde        | tekenreeks | De huidige waarde van het tekstgebied                                        |

</Tab>
</Tabs>
